import React, { useEffect ,useRef} from 'react';
import style from './index.module.less'
import {connect} from 'react-redux';
import {List,Row,Col,Image,Button,Upload,message,Modal,Input,Breadcrumb} from 'antd';
import { UploadOutlined,DeleteOutlined,ReadOutlined,FormOutlined,CameraOutlined,SearchOutlined} from '@ant-design/icons';
import { sendActionPost,sendActionDelete,sendActionGet } from '../../../../utils/axios';
import {Link} from 'react-router-dom';

const AlbumList=(props)=>{

    //Ref区
    const nameRef = useRef()
    const movePhotoRef = useRef()
    const searchRef = useRef()

    //Effect区
    useEffect(()=>{
        getAlbumList()
    },[])


    //配置上传文件区 以post方式，form-data传递
    const uploadProps={
        name:'image',
        action:"/api"+`/api/v1/album/${props.match.params.albumid}/upload/direct`,
        headers:{
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
              console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
              message.success(`${info.file.name} 上传成功`);
              getAlbumList();
            } else if (info.file.status === 'error') {
              message.error(`${info.file.name} 上传失败`);
            }
          },
          withCredentials:true,
          method:'POST',
    }


    const {AlbumListDispatch} = props;
    var albumid = props.match.params.albumid

    //事件区
    const getAlbumList=async()=>{
        await AlbumListDispatch.getAlbumListAsync(albumid);
    }


    //重命名Modal API
    const renameModal =(id)=>{
        Modal.confirm({
            title:'重命名',
            content:(
                <div>
                    <Input placeholder='请输入新名字' ref={nameRef}/>
                </div>
            ),
            async onOk(){
                const res = await sendActionPost(`/api/v1/album/${albumid}/objects/${id}/rename`,{
                    name:nameRef.current.state.value
                })
                if(res.data.successful===true){
                    message.success(`更改成功`)
                    Modal.destroyAll()
                    getAlbumList()
                }else{
                    message.error(`更改失败`)
                }
            }
        })
    }

    const removePhoto =async(id)=>{
        const res = await sendActionDelete(`/api/v1/album/${albumid}/objects/${id}`)
        if(res.data.successful===true){
            message.success('删除成功')
            Modal.destroyAll()
            getAlbumList()
        }else{
            message.error('删除失败')
        }
    }

    const movePhoto = (id)=>{
        Modal.confirm({
            title:'移动照片',
            content:(
                <div>
                    <Input ref={movePhotoRef} placeholder='请输入移动到相册的id'/>
                </div>
            ),
            async onOk(){
                const res = await sendActionPost(`/api/v1/album/${albumid}/objects/${id}/move`,{
                    target:movePhotoRef.current.state.value
                })
                if(res.status===200){
                    message.success('移动成功')
                    Modal.destroyAll()
                    getAlbumList()
                }else{
                    message.error('移动失败')
                }
            }
        })
    }

    const searchPhoto= async()=>{
        const res = await sendActionGet(`/api/v1/album/${albumid}/search?keyword=${searchRef.current.state.value}`)
        const {results} = res.data
        if(results.length===0){
            message.error('搜索失败，未找到对应相片')
        }else{
            Modal.success({
                title:'搜索成功',
                content:(
                    <div>
                        <Row type="flex" justify='space-around'>
                            <Col span={8} className={style.searchmodal}>
                                <Image width={150} src={results[0].link}/>
                                <div className={style.itemname}>name：{results[0].name}</div>
                            </Col>
                            <Col span={8}>
                            <div className={style.btncontainer}>
                                <Button className={style.btn} icon={<FormOutlined/>} type="primary" onClick={()=>{renameModal(results[0].id)}} >
                                重命名
                                </Button>
                                </div>

                                <div className={style.btncontainer}>
                                <Button className={style.btn} icon={<ReadOutlined/>} type="primary" onClick={()=>{movePhoto(results[0].id)}}>
                                移动
                                </Button>
                                </div>

                                <div className={style.btncontainer}>
                                <Button className={style.btn} icon={<DeleteOutlined/>} type="primary" danger onClick={()=>{removePhoto(results[0].id)}}>
                                删除
                                </Button>
                                </div>
                            </Col>
                        </Row>
                    </div>
                ),
                width:1200,
                afterClose(){
                    getAlbumList()
                },
                okText:"关闭"
            })
        }
    }

    return(
        <div className={style.allcontainer}>
        <div className={style.breadcontainer}>
            <Breadcrumb>
                <Breadcrumb.Item><Link to='/index/album'><CameraOutlined/><span>相册</span></Link></Breadcrumb.Item>
                <Breadcrumb.Item><span>相册id：{props.match.params.albumid}</span></Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className={style.searchcontainer}>
            <Input prefix={<SearchOutlined/>} className={style.searchinput} placeholder='搜索' ref={searchRef}/>
            <Button type="primary" onClick={()=>{searchPhoto()}}>搜索</Button>
        </div>
        <div className={style.container}>
            <List
                dataSource={props.Albumstate.objects1}
                itemLayout="vertical"
                header={<div className={style.listtitle}>照片列表</div>}
                renderItem={(item)=>{
                    return(
                        <List.Item>
                        <Row type="flex" justify="space-around">

                            <Col span={8}>
                                <Image width={150} height={100} src={item.link}/>
                                <div className={style.itemname}>{item.name}</div>
                            </Col>

                            <Col span={8}>
                                <div className={style.btncontainer}>
                                <Button className={style.btn} icon={<FormOutlined/>} type="primary" onClick={()=>{renameModal(item.id)}} >
                                重命名
                                </Button>
                                </div>

                                <div className={style.btncontainer}>
                                <Button className={style.btn} icon={<ReadOutlined/>} type="primary" onClick={()=>{movePhoto(item.id)}}>
                                移动
                                </Button>
                                </div>

                                <div className={style.btncontainer}>
                                <Button className={style.btn} icon={<DeleteOutlined/>} type="primary" danger onClick={()=>{removePhoto(item.id)}}>
                                删除
                                </Button>
                                </div>

                            </Col>
                        </Row>
                        </List.Item>
                    )
                }}
             />
        <div className={style.uploadcontainer}>
            <Upload {...uploadProps}>
                <Button icon={<UploadOutlined/>}>上传照片</Button>
            </Upload>
        </div>
        </div>

        </div>
    )

}

const mapState =(state)=>({
    Albumstate:state.AlbumList
})

const mapDispatch=(dispatch)=>({
    AlbumListDispatch:dispatch.AlbumList
})

export default connect(mapState,mapDispatch)(AlbumList);